<script setup lang="ts">
import { ref } from "vue"
import { ElMessage, ElIcon, ElButton } from "element-plus"
import { Male, Female, QuestionFilled, Coin, Star } from "@element-plus/icons-vue"
import { getUserInfoApi, type UserInfoData } from "@/api/user"
import ImagePreview from "@/components/ImagePreview.vue"

// 查询参数
interface SearchType {
    userId: string;
    userNo: string;
}

const searchParams = ref<SearchType>({
    userId: "",
    userNo: ""
})

// 用户信息数据
const userInfo = ref<UserInfoData | null>(null)
const loading = ref(false)

// 图片预览相关
const previewVisible = ref(false)
const previewImageUrl = ref("")
const previewTitle = ref("")



// 查询方法
const handleSearch = async () => {
    if (!searchParams.value.userId && !searchParams.value.userNo) {
        ElMessage.warning("请输入用户ID或用户编号")
        return
    }
    
    loading.value = true
    try {
        const res = await getUserInfoApi(searchParams.value)
        userInfo.value = res.data
        ElMessage.success("查询成功")
    } catch (error) {
        console.error("查询失败:", error)
        ElMessage.error("查询失败")
    } finally {
        loading.value = false
    }
}

// 重置方法
const handleReset = () => {
    searchParams.value = {
        userId: "",
        userNo: ""
    }
    userInfo.value = null
}

// 预览图片
const handlePreviewImage = (imageUrl: string, nickname: string) => {
    previewImageUrl.value = imageUrl
    previewTitle.value = `${nickname} 的头像`
    previewVisible.value = true
}


</script>

<template>
    <div class="user-info">
        <!-- 查询区域 -->
        <el-card class="mb">
            <el-form :model="searchParams" inline>
                <el-form-item label="用户ID">
                    <el-input 
                        v-model="searchParams.userId" 
                        placeholder="请输入用户ID" 
                        clearable
                        style="width: 250px;"
                    />
                </el-form-item>
                <el-form-item label="用户编号">
                    <el-input 
                        v-model="searchParams.userNo" 
                        placeholder="请输入用户编号" 
                        clearable
                        style="width: 250px;"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button 
                        type="primary" 
                        @click="handleSearch"
                        :loading="loading"
                    >
                        查询
                    </el-button>
                    <el-button @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 用户信息卡片区域 -->
        <div class="user-info-cards">
            <el-row :gutter="20">
                <!-- 左侧卡片区域 -->
                <el-col :span="12">
                    <!-- 基本信息卡片 -->
                    <el-card class="mb">
                        <template #header>
                            <div class="card-header">
                                <span>基本信息</span>
                            </div>
                        </template>
                        <div v-if="userInfo" class="basic-info-content">
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <div class="info-item">
                                        <label>昵称：</label>
                                        <span>{{ userInfo.nickname || '-' }}</span>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="info-item">
                                        <label>性别：</label>
                                        <span class="gender-display">
                                            <el-icon v-if="userInfo.gender === 0" class="gender-icon male">
                                                <Male />
                                            </el-icon>
                                            <el-icon v-else-if="userInfo.gender === 1" class="gender-icon female">
                                                <Female />
                                            </el-icon>
                                            <el-icon v-else class="gender-icon unknown">
                                                <QuestionFilled />
                                            </el-icon>
                                            <span class="gender-text">
                                                {{ userInfo.gender === 0 ? '男' : userInfo.gender === 1 ? '女' : '未知' }}
                                            </span>
                                        </span>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <div class="info-item">
                                        <label>生日：</label>
                                        <span>{{ userInfo.birth || '-' }}</span>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="info-item avatar-item">
                                        <label>头像：</label>
                                        <el-avatar 
                                            :src="userInfo.avatar" 
                                            :size="50"
                                            @click="handlePreviewImage(userInfo.avatar, userInfo.nickname)"
                                            style="cursor: pointer;"
                                        />
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <div class="info-item">
                                        <label>国家：</label>
                                        <span>{{ userInfo.countryCode || '未知' }}</span>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="info-item">
                                        <label>分成比例：</label>
                                        <span class="divide-value">{{ userInfo.divide || 0 }}%</span>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div v-else class="empty-content">
                            <el-empty description="请输入查询条件获取用户信息" :image-size="60" />
                        </div>
                    </el-card>

                    <!-- 资产信息卡片 -->
                    <el-card class="mb">
                        <template #header>
                            <div class="card-header">
                                <span>资产信息</span>
                            </div>
                        </template>
                        <div v-if="userInfo" class="asset-info-content">
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <div class="asset-item">
                                        <label>金币：</label>
                                        <span class="coin-value">
                                            <el-icon class="coin-icon">
                                                <Coin />
                                            </el-icon>
                                            {{ userInfo.coin?.toLocaleString() || '0' }}
                                        </span>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="asset-item">
                                        <label>钻石：</label>
                                        <span class="diamond-value">
                                            <el-icon class="diamond-icon">
                                                <Star />
                                            </el-icon>
                                            {{ userInfo.diamond?.toLocaleString() || '0' }}
                                        </span>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div v-else class="empty-content">
                            <el-empty description="请输入查询条件获取用户信息" :image-size="60" />
                        </div>
                    </el-card>

                    <!-- 财富信息卡片 -->
                    <el-card class="mb">
                        <template #header>
                            <div class="card-header">
                                <span>财富信息</span>
                            </div>
                        </template>
                        <div class="empty-content">
                            <el-empty description="暂无财富信息" :image-size="60" />
                        </div>
                    </el-card>
                </el-col>

                <!-- 右侧卡片区域 -->
                <el-col :span="12">
                    <!-- 工会信息卡片 -->
                    <el-card class="mb">
                        <template #header>
                            <div class="card-header">
                                <span>工会信息</span>
                            </div>
                        </template>
                        <div class="empty-content">
                            <el-empty description="暂无工会信息" :image-size="60" />
                        </div>
                    </el-card>

                    <!-- 房间信息卡片 -->
                    <el-card class="mb">
                        <template #header>
                            <div class="card-header">
                                <span>房间信息</span>
                            </div>
                        </template>
                        <div class="empty-content">
                            <el-empty description="暂无房间信息" :image-size="60" />
                        </div>
                    </el-card>

                    <!-- 等级信息卡片 -->
                    <el-card class="mb">
                        <template #header>
                            <div class="card-header">
                                <span>等级信息</span>
                            </div>
                        </template>
                        <div class="empty-content">
                            <el-empty description="暂无等级信息" :image-size="60" />
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!-- 图片预览组件 -->
        <ImagePreview 
            v-model="previewVisible"
            :image-url="previewImageUrl"
            :title="previewTitle"
        />




    </div>
</template>

<style scoped lang="less">
.user-info {
    .mb {
        margin-bottom: 15px;
    }
    
                .user-info-cards {
        .el-card {
            height: 280px;
            display: flex;
            flex-direction: column;
            
            :deep(.el-card__body) {
                flex: 1;
                display: flex;
                flex-direction: column;
            }
        }
        
        .card-header {
            font-weight: bold;
            color: #333;
            text-align: center;
            font-size: 16px;
        }
        
        .info-item {
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 50px;
            
            label {
                font-weight: bold;
                color: #666;
                margin-right: 8px;
                min-width: 60px;
                text-align: right;
                font-size: 15px;
            }
            
            span {
                color: #333;
                font-size: 15px;
            }
            
            &.avatar-item {
                label {
                    margin-right: 15px;
                }
            }
        }
        
        .avatar-preview {
            text-align: center;
            height: 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            
            .avatar-tip {
                margin-top: 10px;
                color: #999;
                font-size: 14px;
            }
        }
        
        .asset-info-content {
            height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .asset-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 15px 0;
            height: 200px;
            justify-content: center;
            
            label {
                font-weight: bold;
                color: #666;
                font-size: 16px;
            }
        }
        
        .coin-value {
            color: #f39c12;
            font-weight: bold;
            font-size: 22px;
            display: flex;
            align-items: center;
            gap: 8px;
            
            .coin-icon {
                font-size: 24px;
                color: #f39c12;
            }
        }
        
        .diamond-value {
            color: #3498db;
            font-weight: bold;
            font-size: 22px;
            display: flex;
            align-items: center;
            gap: 8px;
            
            .diamond-icon {
                font-size: 24px;
                color: #3498db;
            }
        }
        
        .gender-display {
            display: flex;
            align-items: center;
            gap: 8px;
            
            .gender-icon {
                font-size: 20px;
                
                &.male {
                    color: #409eff;
                }
                
                &.female {
                    color: #f56c6c;
                }
                
                &.unknown {
                    color: #909399;
                }
            }
            
            .gender-text {
                font-weight: 500;
                font-size: 15px;
            }
        }
        
        .divide-value {
            color: #67c23a;
            font-weight: bold;
            font-size: 15px;
        }
        

        
        .basic-info-content {
            height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .empty-content {
            height: 200px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>